<template>
    <div class="scroll_table">
        <div style="display: inline-block; width: 100%">
            <el-table border :data="tableList" class="table">
                <el-table-column v-for="(item, index) in columns" :key="index + 'i'" :label="item.label" :prop="item.prop" />
            </el-table>
            <vue-seamless-scroll v-if="this.tableList.length>0" @ScrollEnd="ScrollEndEv" :data="tableList" class="seamless-warp" style="width: 100%"
                :class-option="classOption">
                <el-table border :data="tableList" class="table_scroll">
                    <el-table-column v-for="(item, index) in columns" :key="index + 'i'" :label="item.label"
                        :prop="item.prop" />
                </el-table>
            </vue-seamless-scroll>
            <div v-else>暂无数据</div>
        </div>
    </div>
</template>
<script>
export default {
    name: "ScrollTable",
    data() {
        return {
            columns: [
                { prop: 'name', label: '姓名', minWidth: '100', sort: true },
                { prop: 'date', label: '日期', minWidth: '180', sort: true },
                { prop: 'age', label: '年龄', minWidth: '180', sort: true },
                { prop: 'status', label: '状态', minWidth: '180', sort: true },
                { prop: 'address', label: '地址', minWidth: '220', sort: true }
            ],
            tableList: [
                {name:"老一",age:19,status:'死亡',address:'广州'},
                {name:"老二",age:19,status:'死亡',address:'广州'},
                {name:"老三",age:19,status:'死亡',address:'广州'},
                {name:"老四",age:19,status:'死亡',address:'广州'},
                {name:"老五",age:19,status:'死亡',address:'广州'},
                {name:"老六",age:19,status:'死亡',address:'广州'},
            ]
        }
    },
    mounted() {

    },
    computed: {
        classOption() {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: this.tableList.length, // 开始无缝滚动的数据量 this.tableList
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
                navigation: false
            }
        }
    },
    methods: {
        ScrollEndEv() {
            console.log('滚动完成');


            // this.tableList = [...ccc]
            console.log(this.tableList)
        }
    }
    
}
</script>
<style lang="less" scoped>
.scroll_table {
    // margin: 15px;
    display: flex;

    ::v-deep .table .el-table__body-wrapper {
        display: none;
    }

    // 重点注意这段样式
    .seamless-warp {
        height: 200px;
        overflow: hidden;

        ::v-deep .table_scroll .el-table__header-wrapper {
            display: none;
        }
    }
}
</style>